<template>
    <div>
      <Tabs :value="index" @on-click="clickTabs">
        <TabPane label="事项PDF" name="name1">
          <div>
            <div>
              <div>
                <Input type="text" @on-click="init()" placeholder="请输入编码" style="width: 164px;margin-right: 15px" v-model="params.id"
                       icon="ios-search"/>
                <Input type="text" @on-click="init()" placeholder="请输入关键字" style="width: 164px" v-model="params.title"
                       icon="ios-search"/>
                <Button type="primary" @click="init()" style="margin-left: 20px">搜索</Button>
              </div>
            </div>
            <div style="margin: 20px 0px">
              <template>
                <Table :columns="columns1" :data="data1">
                  <template slot-scope="{ row, index }" slot="file_url">
                    <div v-if="row.file_url!==undefined">
                      <Button type="primary" size="small" style="margin-right: 5px" @click="show(index,row)">查看</Button>
                    </div>
                    <div v-else>
                      <Button type="primary" size="small" style="margin-right: 5px" disabled>暂无</Button>
                    </div>
                  </template>
                </Table>
              </template>
            </div>
            <Modal
              v-model="modal"
              :title="tittle"
              width="1100">
              <embed v-if="modal" :src="img" width="100%" height="600"/>
            </Modal>
          </div>
        </TabPane>
        <TabPane label="要件" name="name2">
          <div style="margin-bottom: 20px">
            <div>
              <Input type="text"  placeholder="请输入要件名称" style="width: 164px;margin-right: 15px" v-model="DepositInfo.name"
                     icon="ios-search"/>
              <Input type="text"  placeholder="请输入字段名称" style="width: 164px" v-model="DepositInfo.value"
                     icon="ios-search"/>
              <Button type="primary"  style="margin-left: 20px" @click="findDepositList">搜索</Button>
            </div>
          </div>
          <template>
            <Table border :columns="columnsDeposit" :data="dataDeposit">
              <template slot-scope="{ row }" slot="type">
                <div v-if="row.type==='file'">图片</div>
                <div v-else>表单</div>
              </template>
              <template slot-scope="{ row }" slot="is_deposit">
                <div v-if="row.is_deposit==='1'">可以</div>
                <div v-if="row.is_deposit==='0'">不可以</div>
              </template>
              <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="depositShow(row)">修改</Button>
              </template>
            </Table>
          </template>
        </TabPane>
        <TabPane label="电子凭证" name="name3">
          <Table :columns="columns11" :data="data11">
            <template slot-scope="{ row, index }" slot="img_url">
              <Button type="primary" size="small" style="margin-right: 5px" @click="show1(index,row)">查看图片要件</Button>
            </template>
          </Table>
          <div style="text-align: right;margin-top: 20px">
            <Page :total="Info.total" :page-size="Info.pageSize" show-sizer show-total show-elevator @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
          </div>
          <Modal
            v-model="modal111"
            width="800"
            height="700"
            title="图片要件">
            <Carousel v-model="index1" style="width: 800px" dots="outside" trigger="hover">
              <CarouselItem  v-for="(item, index) in docunmentList" :key="index">
                <img :src="item" width="800px" height="1000px"/>
              </CarouselItem>
            </Carousel>
          </Modal>
        </TabPane>
      </Tabs>
    </div>
</template>

<script>
import { eventlist, findDepositList, findDZZMList } from '@/api/eventlist'
export default {
  name: 'index',
  data () {
    return {
      index1: 0,
      columns11: [
        {
          title: '事项编码',
          key: 'item_id'
        },
        {
          title: '事项名称',
          key: 'title'
        },
        {
          title: '电子证明',
          slot: 'img_url'
        }
      ],
      data11: [],
      Info: { total: 0, pageNo: 1, pageSize: 10 },
      index: 0,
      columns1: [
        {
          title: '编码',
          key: 'id'
        },
        {
          title: '关键字',
          key: 'text'
        },
        {
          title: 'PDF',
          slot: 'file_url'
        }
      ],
      data1: [],
      modal: false,
      tittle: '',
      img: '',
      params: {
        id: '',
        title: ''
      },
      depositModal: false,
      DepositInfo: { name: '', value: '' },
      columnsDeposit: [
        {
          title: '名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '字段',
          key: 'value',
          align: 'center'
        },
        {
          title: '类型',
          slot: 'type',
          align: 'center'
        },
        {
          title: '是否可以沉淀',
          slot: 'is_deposit',
          align: 'center'
        },
        {
          title: '沉淀可用天数',
          key: 'deposit_day',
          align: 'center'
        }],
      //   },
      //   { title: '操作',
      //     align: 'center',
      //     slot: 'action',
      //     width: 170 }
      // ],
      dataDeposit: [],
      docunmentList: [],
      modal111: false
    }
  },
  methods: {
    show1 (e1, e2) {
      this.modal111 = true
      this.docunmentList = []
      let url = e2.img_url
      this.docunmentList = url.split(',')
    },
    clickTabs (e) {
      if (e === 'name1') {
        this.init()
      } else if (e === 'name2') {
        this.findDepositList()
      } else if (e === 'name3') {
        this.findDZZMList()
      }
    },
    findDZZMList () {
      let data = this.info
      findDZZMList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.Info.total = ret.data.data.totalRecord
          this.data11 = ret.data.data.results
        }
      })
    },
    show (e1, e2) {
      this.img = ''
      this.tittle = e2.text
      this.img = e2.file_url
      console.log(this.img)
      this.modal = true
    },
    init () {
      let data = this.params
      eventlist(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data1 = ret.data.data
        }
      })
    },
    pageChange (page) {
      this.Info.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.Info.pageSize = e
      this.init()
    },
    findDepositList () {
      let data = this.DepositInfo
      findDepositList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.dataDeposit = ret.data.data.results
        } else {
          this.$Notice.error({
            title: '查询列表失败',
            desc: ret.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>

</style>
